<template>
  <div class="share-core-data">
    <statistics-data
      :statistics="coreData"
      :xAxis="xAxis"
      :yAxis="yAxis"
      :series="series"
      :legend="legend"
      :flag="flag"
      :tableLoadData="tableLoadData"
      :tableHeadConfig="tableHeadConfig"
      v-model="modelVal"
      :showSelect="true"
      :options="this.$ENUMS.shareProductLineSl"
      :showSelect2="true"
      :options2="this.$ENUMS.shareTerminalSl"
      :select2="select2"
    ></statistics-data>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
import { fieldCover } from "@/utils/field";
export default {
  components: {
    StatisticsData,
  },
  data() {
    return {
      coreData: {},
      xAxis: [],
      yAxis: [],
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
      startTime: "",
      endTime: "",
      // 默认选择
      select2: this.$ENUMS.shareTerminalSl[3].value,
    };
  },
  watch: {
    modelVal(newval) {
      this.startTime = newval.dataVal[0];
      this.endTime = newval.dataVal[1];
      var workType = newval.workType;
      var workType2 = newval.workType2;
      this.handleClick(
        this.startTime,
        this.endTime,
        workType.toString(),
        workType2.toString()
      );
    },
  },
  methods: {
    async handleClick(startTime, endTime, workType, workType2) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.xAxis = [];
      this.yAxis = [];
      this.series = [];

      this.$service
        .StatisShareChart({
          startDate: startTime,
          endDate: endTime,
          pt: workType,
          os: workType2,
        })
        .then((res) => {
          this.tableLoadData = [...res];
          this.tableHeadConfig = this.$ENUMS.regShare;
          this.legend = this.$ENUMS.regShareLegend;
          this.yAxis = [{ type: "value" }];
          var Cnts = [[], [], [], [], [], []];
          res.map((item) => {
            // 处理一下合计
            if (item.day !== "合计") {
              this.xAxis.push(item.day);
            }
            Cnts[0].push(item.qqCnt);
            Cnts[1].push(item.wxqCnt);
            Cnts[2].push(item.wxCnt);
            Cnts[3].push(item.wbCnt);
            Cnts[4].push(item.otherCnt);
          });
          Cnts.map((cnt, index) => {
            var serie = {
              name: this.legend[index],
              type: "line",
              data: cnt,
            };
            this.series.push(serie);
          });
          this.flag = true;
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.share-core-data {
  text-align: left;
}
</style>
